<template>
  <div class="search">
    <!-- 搜索框 -->
    <div class="searchArea">
      <mt-search
        v-model="searchkey"
        placeholder="搜索"
      > </mt-search>
      <mt-button
        size="small"
        @click='searchProduct'
      >搜索</mt-button>
    </div>
    <!-- 搜索内容 -->
    <mt-cell :to="{'name': 'SearchList', params: {'key': item}}" :title="item" v-for='(item,index) in histotyArr' :key='index'>
        <span @click.prevent.stop ='delHistory(index)'>×</span>
    </mt-cell>
    <span v-show='histotyArr.length === 0'>没有任何搜索历史数据</span>
  </div>
</template>
<script>
export default {
  data () {
    return {
      searchkey: '',
      histotyArr: []
    }
  },
  methods: {
    // 获取搜索记录
    getHistory () {
      // 将当前用户的搜索记录从本地存储中取出来
      var historyStr = localStorage.getItem('lt_history')
      // 将取出来的搜索记录转为数组，若没有数据，则设置为空数组 -- 将结果返回
      return JSON.parse(historyStr || '[]')
    },
    // 搜索信息
    searchProduct () {
      // 调用搜索记录方法
      var tmp = this.getHistory()
      // 将新的搜索记录存储到本地存储中
      tmp.push(this.searchkey)
      localStorage.setItem('lt_history', JSON.stringify(tmp))
      // 跳转到搜索页面
      this.$router.push({
        name: 'SearchList',
        params: { key: this.searchkey }
      })
    },
    // 删除搜索记录
    delHistory (index) {
      // 调用搜索记录方法，显示出来
      this.histotyArr = this.getHistory()
      // 根据索引删除搜索记录
      this.histotyArr.splice(index, 1)
      // 将删除后剩下的搜索记录重新存到本地存储中
      localStorage.setItem('lt_history', JSON.stringify(this.histotyArr))
    }
  },
  mounted () {
    // 调用搜索记录方法，显示出来
    this.histotyArr = this.getHistory()
    // console.log(this.histotyArr)

    // 设置标题
    this.$store.state.title = '搜索商品'
  }
}
</script>
<style lang="scss" scoped>
.search {
  .searchArea {
    position: relative;
    .mint-search {
      height: auto;
    }
    .mint-button--small {
      height: 29px;
      border-radius: 0 4px 4px 0;
      background-color: skyblue;
      position: absolute;
      right: 3px;
      top: 7px;
      z-index: 999;
      color: #333;
    }
  }
}
</style>
